import React from 'react';
// import Item from './CustomerItem';
import { List } from 'antd-mobile';
import Star from '../../common/Star'; 

const Item = List.Item;
const Brief = Item.Brief;

import './index.sass';

export default class CustomerList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {type} = this.props;
    return (
      <List className='customer-list-container'>
        {
          this.props.data.length === 0 && <div style={{color: '#999', fontSize: '0.16rem', textAlign: 'center', padding: '0.12rem 0'}}>暂无数据</div>
        }
        {this.props.data.length > 0 && this.props.data.map((item, index) => {
          if(type === 1){
            const customerStatus = Number(item.customerStatus);
            const icons = [
              'crmicon-weiqianyue',
              'crmicon-hezuozhong',
              'crmicon-yidaoqi',
              'crmicon-hezuodaoqi',
            ]
            return (
              <CustomerItem
                key={index}
                extra={ <i style={{fontSize: '1.2rem', color: customerStatus === 1 ? '#22bba0' : '#888'}} className={`crmiconfont ${icons[customerStatus]}`}/> }
                onClick={() => this.props.onClick(item)}
                title={item.cName}
                subtitle={<div>{item.name || '/'}<span style={{display:'inline-block', width: '0.24rem'}} /> {item.mobile || '/'}</div>}
              />
            )
          }else if(type === 'search'){
            const customerStatus = Number(item.customerStatus);
            const icons = [
              'crmicon-weiqianyue',
              'crmicon-hezuozhong',
              'crmicon-yidaoqi',
              'crmicon-hezuodaoqi',
            ]
            return (
              <CustomerItem
                key={index}
                extra={customerStatus !== 0 ? <i style={{fontSize: '1.2rem', color: customerStatus === 1 ? '#22bba0' : '#888'}} className={`crmiconfont ${icons[customerStatus]}`}/> 
                  : <Star number={item.starLevel} /> 
                }
                onClick={() => this.props.onClick(item)}
                title={item.name}
                subtitle={<div>{item.contactName || '/'}<span style={{display:'inline-block', width: '0.24rem'}} /> {item.contactPhone       || '/'}</div>}
              />
            )
          }else{
            return (
              <CustomerItem
                key={index}
                extra={<Star number={item.customer.starLevel} />}
                onClick={() => this.props.onClick(item)}
                title={item.customer.cName}
                subtitle={<div>{item.contact ? item.contact.name || '/' : '/'}<span style={{display:'inline-block', width: '0.24rem'}} /> {item.contact ? item.contact.mobile || '/' : '/'}</div>}
              />
            )
          }
        })}
      </List>
    );
  }
}

class CustomerItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Item multipleLine extra={this.props.extra} arrow="horizontal" onClick={this.props.onClick}>
        {this.props.title} <Brief>{this.props.subtitle}</Brief>
      </Item>
    );
  }
}
